<template>
  <uni-nav-bar title="新建车用尿素外卖单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package center" style="background-color: #DFF0FF;justify-content: center;color: #1B91FF;">
    <text>点击上方</text>
    <uni-icons type="more-filled" size="30" style="margin: 4px 10rpx 0px;"></uni-icons>
    <text>分享到微信好友</text>
  </view>
  <view class="package" style="font-size: 30rpx;">
    <view class="space-between">
      <view>姓名</view>
      <text>{{ information.name?information.name:'暂无' }}</text>
    </view>
    <view class="space-between Top">
      <view>预约时间段</view>
      <text>{{ indicate?indicate:'暂无' }}</text>
    </view>
    <view class="space-between Top">
      <view>车牌号</view>
      <text>{{ information.cart_code?information.cart_code:'暂无' }}</text>
    </view>
    <view class="space-between Top" style="align-items: flex-start;">
      <view style="margin-bottom: 10rpx;">加注地址</view>
      <view v-if="information.locposition" style="width: 70%;text-align: right;">{{ information.locposition}}{{information.detailed}}</view>
      <text v-else>暂无</text>
    </view>
  </view>
  <!-- #ifdef H5 -->
  <webWechat :path="path" :title="text"></webWechat>
  <!-- #endif -->
</template>

<script setup lang="ts">
import { navBack } from '@/utils/navigator';
import { toPublish } from '@mqtt';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import webWechat from '@c/pobulic/webWechat.vue';
import { getLog } from '@/gql/archives';
import { getDriverID } from '@/stores/driverID';
const driver_id = getDriverID();
const information = ref({});
const indicate=ref('')
const text = ref('');
const path = ref('');
onLoad((pearm) => {
  text.value = pearm.name ? pearm.name + '的车用尿素外卖单' : '安蓝车友的车用尿素外卖单';
  path.value = `https://wx.anlan.tech/#/?type=act&TakeoutRder=${pearm.id}`;
  init(pearm.id)
});
function init(id){
  const payload = {
    query: getLog,
    variables: {
      id: Number(id),
      driver_id
    },
  };
  toPublish('ql/take/getLog', payload, (obj: any) => {
    const { data } = obj;
    information.value=data.getLog
    if(data.getLog.starttime){
      indicate.value=data.getLog.starttime.slice(5) + ' 至 ' + data.getLog.endtime.slice(5)
    }
  });
}
</script>

<style scoped lang="less">
.Top {
  margin-top: 30rpx;
}
.package {
  input {
    text-align: right;
  }
}
</style>
